<template>
  <div
    ref="danmaWrapper"
    class="n-danma__wrapper"
    :class="{
      'n-danma__paused': paused,
      'n-danma-hide__move': visible?.move === false,
      'n-danma-hide__top': visible?.top === false,
      'n-danma-hide__bottom': visible?.bottom === false,
      'n-danma-hide__color': visible?.color === false,
    }"></div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import type { DanmakuSlots, DanmakuProps } from "./_interface";
import { useDraw } from "./use-draw";

const props = withDefaults(defineProps<DanmakuProps>(), {
  horizontalSpacing: 20,
  lineHeight: 24,
});
const slots = defineSlots<DanmakuSlots>();

const danmaWrapper = ref<HTMLDivElement>();
const { draw } = useDraw(danmaWrapper, props, slots);

defineExpose({ draw });
</script>

<style>
.n-danma__wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}
.n-danma__paused .n-danma-item {
  animation-play-state: paused;
}
.n-danma-hide__move .n-danma-item__move {
  visibility: hidden;
}
.n-danma-hide__top .n-danma-item__top {
  visibility: hidden;
}
.n-danma-hide__bottom .n-danma-item__bottom {
  visibility: hidden;
}
.n-danma-hide__color .n-danma-item__color {
  visibility: hidden;
}

.n-danma-item {
  position: absolute;
  text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.5);
}

.n-danma-item__move {
  right: 0;

  will-change: transform;
  animation-name: danmaku-move;
  animation-timing-function: linear;
}
@keyframes danmaku-move {
  from {
    transform: translateX(100%);
  }
}
.n-danma-item__top,
.n-danma-item__bottom {
  left: 50%;
  transform: translateX(-50%);
  visibility: hidden;
  will-change: visibility;
  animation-name: danmaku-center;
  animation-timing-function: linear;
}
@keyframes danmaku-center {
  from {
    visibility: visible;
  }
  to {
    visibility: visible;
  }
}
</style>
